<template>
  <div ref="chart">
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'Memory',
    data() {
      return {
        chart: '',
        option: {
          title: {
            text: '光照状态',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#283b56'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: ['当前光照', '需求光照']
          },
          dataZoom: {
            show: false,
            start: 0,
            end: 100
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: (function () {
                var now = new Date();
                var res = [];
                var len = 10;
                while (len--) {
                  res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                  now = new Date(now - 5*1000);
                }
                return res;
              })()
            },
            {
              type: 'category',
              boundaryGap: true,
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(10 - len - 1);
                }
                return res;
              })()
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              name: '光照',
              max: 100,
              min: 0,
              boundaryGap: [0.2, 0.2]
            },
            {
              type: 'value',
              scale: true,
              name: '走势',
              max: 100,
              min: 0,
              boundaryGap: [0.2, 0.2]
            }
          ],
          series: [
            {
              name: '当前光照',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 10)+30);
                }
                return res;
              })()
            },
            {
              name: '需求光照',
              type: 'line',
              data: (function () {
                var res = [];
                var len = 0;
                while (len < 10) {
                  res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                  len++;
                }
                return res;
              })()
            }
          ]
        }
      };
    },
    mounted() {
      this.chart = echarts.init(this.$refs['chart']);
      this.chart.setOption(this.option, true);
      var chart = this.chart;
      var one = this.option;
      var count = 11;
      setInterval(function () {
        let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        let data0 = one.series[0].data;
        let data1 = one.series[1].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 10)+30);
        data1.shift();
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

        one.xAxis[0].data.shift();
        one.xAxis[0].data.push(axisData);
        one.xAxis[1].data.shift();
        one.xAxis[1].data.push(count++);
        chart.setOption(one);
      }, 5*1000);
    }
  };
</script>

<style scoped>
  .m-map {
    width: 100%;
    height: 100%;
  }
</style>
